<template>
  <div class="page-root">
    <div class="content-wrap">
      <component :is='curView'></component>
    </div>
    <div class="btns">
      <el-button type='primary' plain @click='changeContent("Particle")'>图形粒子化</el-button>
      <el-button type='primary' plain @click='changeContent("Tree")'>canvas树</el-button>
      <el-button type='primary' plain @click='changeContent("Ball")'>3d球规则</el-button>
      <el-button type='primary' plain @click='changeContent("Ball2")'>3d球随机</el-button>
      <el-button type='primary' plain @click='changeContent("StarSky")'>星空</el-button>
      <el-button type='primary' plain @click='changeContent("FireWork")'>烟花</el-button>
      <el-button type='primary' plain @click='changeContent("StarTravel")'>星际旅行</el-button>
    </div>
  </div>
</template>
<script>
// 代码过程中遇到一个坑，这里记录一下：
    // canvas中做动画时，先clearRect清除整个画布，再画需要的图形，以达到动画的运动效果。但是如果使用先画矢量路径，再fill填颜色的方式来绘制图形，务必要先ctx.beginPath() ;否则。矢量路径不会被clearRect清除。 导致运动动画失败。 规范点来做，绘制完成一个路径，还要closePath；切记！

import Particle from '@/components/particle.vue' ;
import Tree from '@/components/tree.vue'  ;
import Ball from '@/components/ball.vue'  ; // 规则点分布的球，其实只是生成point的方法 calcPoint 不一样而已。
import Ball2 from '@/components/ball2.vue'  ; // 点随机的球，其实只是生成point的方法 calcPoint 不一样而已。
import StarSky from '@/components/starSky.vue'  ; 
import FireWork from '@/components/fireWork.vue'  ; 
import StarTravel from '@/components/starTravel.vue'  ; 

export default {
  components:{Particle,Tree,Ball,Ball2,StarSky,FireWork,StarTravel} ,
  data () {
    return {
      curView:'',
      
    }
  },
  computed:{
     
  },
  methods:{
    changeContent(name){ // 改变展示的内容
      if(name){
        this.curView = name ;
      }else{
        this.curView = '' ;
      }
    }
  },
  filters:{
    
  },
  mounted(){
    
  }
}


</script>
<style scoped>
  .content-wrap{
    width: 100%;
    height: 80%;
    padding: 10px;
    min-height: 600px;
    border:1px solid #EBEEF5;
    border-radius: 8px;
    margin-bottom: 15px;
  }
  .btns{
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    background: #EBEEF5;
  }
</style>
